<template>
  <views class="user_managen_amend">
    <div class="character_name flex flexR">
      <div class="character_name_title Textl">用户名称:</div>
      <div class="character_name_input">
        <el-input v-model="form.user_name" placeholder="请输入用户名称" :clearable="true" disabled></el-input>
      </div>
    </div>

    <div class="character_name flex flexR">
      <div class="character_name_title Textl">手机号码:</div>
      <div class="character_name_input">
        <el-input v-model="form.user_mobile" placeholder="请输入手机号码" :clearable="true"></el-input>
      </div>
    </div>

    <div class="character_name flex flexR">
      <div class="character_name_title Textl">真实姓名:</div>
      <div class="character_name_input">
        <el-input v-model="form.user_real_name" placeholder="请输入真实姓名" :clearable="true"></el-input>
      </div>
    </div>

    <div class="character_name flex flexR">
      <div class="character_name_title Textl">状态:</div>
      <div class="character_name_input">
        <el-radio-group v-model="form.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">锁定</el-radio>
          <el-radio label="2">无效</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="character_name flex flexR" v-if="$store.state.terrace == 3">
      <div class="character_name_title Textl">充值短信:</div>
      <div class="character_name_input">
        <el-radio-group v-model="form.is_account_sms">
          <el-radio label="0">不接收</el-radio>
          <el-radio label="1">接收</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="character_name flex flexR">
      <div class="character_name_title Textl">邮箱:</div>
      <div class="character_name_input">
        <el-input v-model="form.email" placeholder="请输入邮箱" :clearable="true"></el-input>
      </div>
    </div>

    <div class="character_name select_role_list flex flexR" v-if="form.is_admin == 0">
      <div class="character_role_title Textl">角色:</div>
      <div class="character_role_list">
        <div v-for="(item,index) in role_list" v-bind:key="index" class="character_role_list_item">
          <el-checkbox
            v-model="role_list[index].is_check"
            :true-label="1"
            :false-label="0"
            :label="item.role_name"
            @change="checkRole(item)"
            border
          ></el-checkbox>
        </div>
      </div>
    </div>
    <!-- 确定 返回 -->
    <div class="btn_list flex flexR">
      <el-button type="primary" @click="doCommit">确定</el-button>
      <el-button type @click="get_back">返回</el-button>
    </div>
  </views>
</template>




<script>
export default {
  data() {
    return {
      form: {
        email: "",
        is_admin: 0,
        role_id: 0,
        status: "1",
        is_account_sms: "1",
        user_id: 0,
        user_mobile: "",
        user_name: "",
        user_real_name: ""
      },
      role_list: [
        {
          title: "总经理",
          edit: true
        }
      ], // 角色列表
      current_path: "" // 当前路由
    };
  },
  mounted() {
    this.$setRouteTitle();
    this.getData();
    this.current_path = this.$route.path;
  },
  created() {},
  methods: {
    // 返回
    get_back() {
       this.$blackRoute({ path: "/user_managen", query: {}, that: this });
    },
    getData() {
      if (this.$store.state.terrace == 1) {
        this.getEnterpriseData();
      }
      if (this.$store.state.terrace == 2) {
        this.getAgentData();
      }
      if (this.$store.state.terrace == 3) {
        this.getFacilitatorData();
      }
      this.form.status = this.form.status.toString();
    },
    getEnterpriseData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.egetSimpleRoleList,
        this.form
      );
      if (code != 200 && code != 501) {
        this.role_list = [];
        this.$message.error(msg);
        return;
      }
      this.role_list = data;
      let res = this.$api.sendSync(this.$mapapi.egetUserDetail, {
        user_id: this.$route.query.user_id
      });
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }
      this.form = res.data;
      this.initRole();
    },
    getAgentData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.agetSimpleRoleList,
        this.form
      );
      if (code != 200 && code != 501) {
        this.role_list = [];
        this.$message.error(msg);
        return;
      }
      this.role_list = data;
      let res = this.$api.sendSync(this.$mapapi.agetUserDetail, {
        user_id: this.$route.query.user_id
      });
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }
      this.form = res.data;
      this.initRole();
    },
    getFacilitatorData() {
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.fgetSimpleRoleList,
        this.form
      );
      if (code != 200 && code != 501) {
        this.role_list = [];
        this.$message.error(msg);
        return;
      }
      this.role_list = data;
      let res = this.$api.sendSync(this.$mapapi.fgetUserDetail, {
        user_id: this.$route.query.user_id
      });
      if (res.code != 200) {
        this.$message.error(res.msg);
        return;
      }
      this.form = res.data;
      this.form.is_account_sms = this.form.is_account_sms.toString();
      this.initRole();
    },
    //切换角色
    checkRole(item) {
      //单选;
      console.log("item", item, this.role_list);
      for (let i in this.role_list) {
        this.role_list[i].is_check = 0;
        if (this.role_list[i].role_id == item.role_id) {
          this.role_list[i].is_check = 1;
          this.form.role_id = item.role_id;
        }
      }
    },
    //切换角色
    initRole() {
      //单选;
      for (let i in this.role_list) {
        this.role_list[i].is_check = 0;
        if (this.role_list[i].role_id == this.form.role_id) {
          this.role_list[i].is_check = 1;
        }
      }
    },
    doCommit() {
      let postForm = this.form;
      switch (this.$store.state.terrace) {
        case 1:
          this.commitApi = this.$mapapi.esaveEnterpriseUser;
          break;
        case 2:
          this.commitApi = this.$mapapi.saveAgentUser;
          break;
        case 3:
          this.commitApi = this.$mapapi.saveFacilitatorUser;
          break;
        default:
          this.$message.error("无效角色");
          return;
      }
      let { code, msg } = this.$api.sendSync(this.commitApi, postForm);
      if (code != 200) {
        this.$message.error(msg);
        return;
      } else {
        this.$message.success(msg);
        this.$blackRoute({ path: "/user_managen", query: {}, that: this }); // 返回指定路由-删除标题栏
      }
    }
  },
  activated() {
    let flag = false;
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.$setRouteTitle();
      this.getData();
    }
  },
  deactivated() {
    let flag = false; //是否保留数据
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.defaultProps = {
        children: "list",
        label: "permission_name",
        disabled: "is_active"
      };
      this.commitApi = "";
      this.role_name = "";
      this.form = {
        status: 1,
        remark: ""
      };
    }
  },
  computed: {
    getNavList() {
      return this.$store.getters.getNavList;
    }
  }
};
</script>


<style lang="less" :scope="true">
.user_managen_amend {
  padding: 10px 10px 20px 10px;
  background: #ffffff;
  .btn_list {
    margin-top: 25px;
    margin-left: 55px;
    width: 200px;
    justify-content: space-around;
  }
  .character_name {
    height: 55px;
    -moz-box-align: center;
    -webkit-box-align: center;
    // -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    // -ms-flex-pack: center;
    width: 550px;
    .character_name_input {
      margin-left: 15px;
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
    .character_name_title {
      width: 130px;
      text-align: right;
    }
    .character_name_title:before {
      content: "*";
      color: red;
    }
  }
  .select_role_list {
    width: 90%;
    .character_role_title {
      width: 102.28px;
      text-align: right;
    }
    .character_role_title:before {
      content: "*";
      color: red;
    }
    .character_role_list {
      display: flex;
      flex-wrap: wrap;
    }
    .character_role_list_item {
      margin-left: 15px;
    }
  }
}
</style>